<template>
  <div class="home2">
    <!-- 轮播 -->
    <div class="Banner">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img src="../../../assets/img/swiper.jpg" alt />
        </van-swipe-item>
        <van-swipe-item>
          <img src="../../../assets/img/swper4_02.gif" alt />
        </van-swipe-item>
        <van-swipe-item>
          <img src="../../../assets/img/swiper.jpg" alt />
        </van-swipe-item>
        <van-swipe-item>
          <img src="../../../assets/img/swper4_02.gif" alt />
        </van-swipe-item>
      </van-swipe>
    </div>

    <div class="Class">
      <dl @click="$router.push('/layout/classify')">
        <dt>
          <img src="../../../assets/img/one.jpg" alt />
        </dt>
        <dd>商品分类</dd>
      </dl>
      <dl>
        <dt>
          <img src="../../../assets/img/two_03.jpg" alt />
        </dt>
        <dd>领优惠券</dd>
      </dl>

      <dl>
        <dt>
          <img src="../../../assets/img/three_05.jpg" alt />
        </dt>
        <dd>行业资讯</dd>
      </dl>

      <dl>
        <dt>
          <img src="../../../assets/img/four_07.jpg" alt />
        </dt>
        <dd>我要签到</dd>
      </dl>

      <dl>
        <dt>
          <img src="../../../assets/img/five_09.jpg" alt />
        </dt>
        <dd>我的收藏</dd>
      </dl>

      <dl @click="handlePushGroup">
        <dt>
          <img src="../../../assets/img/six_16.jpg" alt />
        </dt>
        <dd>拼团活动</dd>
      </dl>

      <dl @click="gosss()">
        <dt>
          <img src="../../../assets/img/server_18.jpg" alt />
        </dt>
        <dd>秒杀活动</dd>
      </dl>

      <dl @click="handlePushBargain">
        <dt>
          <img src="../../../assets/img/ever_19.jpg" alt />
        </dt>
        <dd>砍价活动</dd>
      </dl>

      <dl @click="() => $router.push('/live')">
        <dt>
          <img src="../../../assets/img/jiu_20.jpg" alt />
        </dt>
        <dd>直播特卖</dd>
      </dl>

      <dl>
        <dt>
          <img src="../../../assets/img/then_21.jpg" alt />
        </dt>
        <dd>订单管理</dd>
      </dl>
    </div>
    <div class="hot-Cake">
      <div class="header">
        <h1>超值爆款</h1>
        <span>美好生活由此开始</span>
      </div>
      <div class="body">
        <div class="body-One">
          <div class="left">
            <span class="product">促销..</span>
            <span class="info">多买多省</span>
            <p class="Go">
              <span>Go!</span>
              <span class="right2">&gt;</span>
            </p>
          </div>
          <div class="right">
            <img src="../../../assets/img/biao.jpg" alt />
          </div>
        </div>
        <div class="body-One">
          <div class="left">
            <span class="product">精品..</span>
            <span class="info">猜你喜欢</span>
            <p class="Go2">
              <span>Go!</span>
              <span class="right3">&gt;</span>
            </p>
          </div>
          <div class="right">
            <img src="../../../assets/img/ren.jpg" alt />
          </div>
        </div>
        <div class="body-One">
          <div class="left">
            <span class="product">热门..</span>
            <span class="info">好评如云</span>
            <p class="Go3">
              <span>Go!</span>
              <span class="right4">&gt;</span>
            </p>
          </div>
          <div class="right">
            <img src="../../../assets/img/tv.jpg" alt />
          </div>
        </div>
        <div class="body-One">
          <div class="left">
            <span class="product">首发..</span>
            <span class="info">最新出炉</span>
            <p class="Go4">
              <span>Go!</span>
              <span class="right5">&gt;</span>
            </p>
          </div>
          <div class="right">
            <img src="../../../assets/img/yuan.jpg" alt />
          </div>
        </div>
      </div>
    </div>
    <!-- 下边轮播 -->
    <div class="Banner2">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img src="../../../assets/img/banner.jpg" alt />
        </van-swipe-item>
        <van-swipe-item>
          <img
            src="http://img.alicdn.com/imgextra/i3/170/O1CN01MYThiL1D7tzXbRkU1_!!170-0-luban.jpg"
            alt
          />
        </van-swipe-item>
        <van-swipe-item>
          <img
            src="https://aecpm.alicdn.com/simba/img/TB15tIjGVXXXXcoapXXSutbFXXX.jpg"
            alt
          />
        </van-swipe-item>
        <van-swipe-item>
          <img
            src="http://img.alicdn.com/imgextra/i4/2206686532409/O1CN01I7f5Pv1TfMmdYVw8S_!!2206686532409-0-lubanimage.jpg"
            alt
          />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 限时秒杀 -->
    <div class="seckill">
      <div class="count-Down">
        <h1>限时秒杀 | 08:00,20:00 场</h1>
        <p>
          00
          <span class="A-little">:</span>00 <span class="A-little">:</span>00
        </p>
        <span class="more">更多 &gt;</span>
      </div>
      <div class="corp">
        <dl>
          <dt>
            <img src="../../../assets/img/iphone.jpg" alt />
          </dt>
          <dd>
            <h3>Apply iPhone...</h3>
            <p>￥88.00</p>
          </dd>
        </dl>
      </div>
    </div>
    <!-- 拼团惠 -->
    <div class="group-Booking">
      <div class="over-Flow">
        <h1>
          <svg-icon iconClass="guoqi" class="icons"></svg-icon>拼团惠
          <span class="Flow">享超值开团价</span>
        </h1>
        <span class="more">超值精选</span>
      </div>
      <div class="corp1">
        <dl>
          <dt>
            <img src="../../../assets/img/iphone.jpg" alt />
          </dt>
          <dd>
            <p>￥88.00</p>
          </dd>
        </dl>
        <dl>
          <dt>
            <img src="../../../assets/img/iphone2.jpg" alt />
          </dt>
          <dd>
            <p>￥10000.00</p>
          </dd>
        </dl>
      </div>
    </div>
    <!-- 砍价活动 -->
    <div class="group-Booking1">
      <div class="over-Flow1">
        <h1>
          <svg-icon iconClass="shuqian" class="icons"></svg-icon>砍价活动
          <span class="Flow">呼朋唤友来砍价</span>
        </h1>
        <span class="more">品质好货</span>
      </div>
      <div class="corp1">
        <dl>
          <dt>
            <img src="../../../assets/img/box.jpg" alt />
          </dt>
          <dd>
            <p>
              ￥0.10
              <span>￥88.00</span>
            </p>
          </dd>
        </dl>
      </div>
    </div>
    <!-- <div class="promotion">
      <p v-for="item in date" :key="item.id">
        {{ item.cword }}
      </p>
    </div>-->
    <!-- 商品列表  Tab切换 -->
    <div class="tabs-shopping" ref="odl">
      <van-tabs v-model="active" background="#f5f5f5" color="#a0adb7">
        <van-tab v-for="item in shop" :key="item.id" :title="item.title">
          <div class="body-shopping">
            <dl
              v-for="(k, ind) in item.children"
              :key="k.id"
              ref="delBox"
              :style="styleList[ind]"
            >
              <dt>
                <img
                  :src="k.url"
                  alt
                  :style="{ height: listHeight[ind] + 'px' }"
                />
              </dt>
              <dd>
                <h3>{{ k.cword }}</h3>
                <p class="price">￥{{ k.price }}.00</p>
                <p class="num">￥{{ k.num }}.00</p>
              </dd>
            </dl>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      active: 0,
      MAX_ITEM_HEIGHT: 255,
      MIN_ITEM_HEIGHT: 150,
      styleList: [], //样式列表
      // heightList: [],
      bigbox: 0,
      listHeight: [], //高度列表
      shop: [],
    };
  },
  created() {
    // this.$store.dispatch("date/SET_GET_DATE");
    // this.$store.dispatch("shop/SET_GET_SHOP");
    // this.$api.getShop().then((res) => {
    //   this.shop = res;
    //   this.$nextTick(() => {
    //     this.compuStyle();
    //   });
    // });
  },
  computed: {
    // ...mapState("date", ["date"]),
    // ...mapState("shop", ["shop"]),
  },
  watch: {
    shop() {
      this.shop.forEach(() => {
        this.imgHeight();
      });
    },
  },
  methods: {
    // 随机高度
    imgHeight() {
      this.listHeight.push(
        Math.floor(
          Math.random() * (this.MAX_ITEM_HEIGHT - this.MIN_ITEM_HEIGHT) +
            this.MIN_ITEM_HEIGHT
        )
      );
    },
    gosss() {
      this.$router.push({ name: "Seckill" });
    },
    compuStyle() {
      console.log(this.$refs.delBox, "项目");
      let leftTop = 0;
      let rightTop = 0;
      let MarginText = 20;
      let PaddingText = 100;
      var obj1 = {}; //准备存放每一个

      this.listHeight.forEach((item) => {
        if (leftTop <= rightTop) {
          obj1 = {
            left: 0,
            top: MarginText + leftTop + "px",
          };
          leftTop += item + MarginText + PaddingText;
        } else {
          obj1 = {
            right: 0,
            top: MarginText + rightTop + "px",
          };
          rightTop += item + MarginText + PaddingText;
        }
        this.styleList.push(obj1);
        console.log(this.styleList, "styleList");
      });
    },
    //跳转砍价页面
    handlePushBargain() {
      if (sessionStorage.getItem("token")) {
        this.$router.push("/bargain");
      } else {
        this.$router.push("/login");
      }
    },
    //跳转拼团页面
    handlePushGroup() {
      if (sessionStorage.getItem("token")) {
        this.$router.push("/group");
      } else {
        this.$router.push("/login");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@css/style.scss";
.home2 {
  flex: 1;
  overflow-y: scroll;
  background: #f5f5f5;
  .Banner {
    width: 100%;
    height: px2rem(150);
    padding: px2rem(10);
    .my-swipe .van-swipe-item {
      color: #fff;
      font-size: px2rem(20);
      text-align: center;
    }
  }
  .Class {
    width: 100%;
    height: px2rem(172);
    padding: px2rem(16) px2rem(22) px2rem(0) px2rem(15);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: px2rem(29);
    dl {
      width: 20%;
      text-align: center;
      dd {
        font-size: px2rem(12);
        margin-bottom: px2rem(8);
      }
    }
  }
  .hot-Cake {
    width: 94%;
    height: px2rem(249);
    background: -webkit-linear-gradient(top, #ffe5e3, #ffe0dd, #ffd3cf);
    margin: px2rem(12) px2rem(11) px2rem(3) px2rem(11);
    border-radius: px2rem(11);
    .header {
      width: 100%;
      height: px2rem(41);
      padding: px2rem(15) px2rem(10);
      display: flex;
      h1 {
        color: #fc3537;
        font-size: px2rem(17);
        font-weight: bolder;
        margin-right: px2rem(9);
      }
      span {
        width: px2rem(113);
        height: px2rem(19);
        font-size: px2rem(12);
        background: -webkit-linear-gradient(
          left,
          #ffa400,
          #ff7e00,
          #ff5b00,
          #ff3a03,
          #ff1f09
        );
        color: #fff;
        display: inline-block;
        margin-top: px2rem(2);
        padding: px2rem(2) px2rem(0);
        text-align: center;
        border-radius: px2rem(8) px2rem(0) px2rem(8) px2rem(0);
      }
    }
    .body {
      width: 100%;
      height: px2rem(209);
      padding: px2rem(5);
      display: flex;
      flex-wrap: wrap;
      .body-One {
        width: 46%;
        height: px2rem(90);
        background: #fff;
        border-radius: px2rem(8);
        margin: px2rem(6) px2rem(6) px2rem(0) px2rem(6);
        display: flex;
        justify-content: space-between;
        .left {
          width: 55%;
          height: 100%;
          padding: px2rem(10) px2rem(9) px2rem(0) px2rem(9);
          .product {
            font-size: px2rem(16);
            display: block;
            height: px2rem(10);
            color: #000;
          }
          .info {
            color: #ccd3d8;
            font-size: px2rem(14);
            height: px2rem(10);
          }
          .Go {
            margin-left: px2rem(3);
            width: px2rem(57);
            height: px2rem(17);
            display: flex;
            justify-content: space-between;
            padding: px2rem(0) px2rem(5);
            align-items: center;
            background: -webkit-linear-gradient(
              left,
              #49c0ff,
              #3eaeff,
              #2f97ff,
              #167aff
            );
            font-size: px2rem(14);
            color: #fff;
            font-weight: bold;
            font-style: oblique;
            border-radius: px2rem(15);
            .right2 {
              width: px2rem(13);
              height: px2rem(13);
              color: #2f97ff;
              background: #fff;
              border-radius: 50%;
              line-height: px2rem(13);
              text-align: center;
            }
          }
          .Go2 {
            margin-left: px2rem(3);
            width: px2rem(57);
            height: px2rem(17);
            display: flex;
            justify-content: space-between;
            padding: px2rem(0) px2rem(5);
            align-items: center;
            background: -webkit-linear-gradient(
              left,
              #ff832e,
              #ff7d35,
              #ff692a,
              #ff561f
            );
            font-size: px2rem(14);
            color: #fff;
            font-weight: bold;
            font-style: oblique;
            border-radius: px2rem(15);
            .right3 {
              width: px2rem(13);
              height: px2rem(13);
              color: #ff692a;
              background: #fff;
              border-radius: 50%;
              line-height: px2rem(13);
              text-align: center;
            }
          }
          .Go3 {
            margin-left: px2rem(3);
            width: px2rem(57);
            height: px2rem(17);
            display: flex;
            justify-content: space-between;
            padding: px2rem(0) px2rem(5);
            align-items: center;
            background: -webkit-linear-gradient(
              left,
              #92e082,
              #81dc6e,
              #65d64e,
              #4ace2d
            );
            font-size: px2rem(14);
            color: #fff;
            font-weight: bold;
            font-style: oblique;
            border-radius: px2rem(15);
            .right4 {
              width: px2rem(13);
              height: px2rem(13);
              color: #65d64e;
              background: #fff;
              border-radius: 50%;
              line-height: px2rem(13);
              text-align: center;
            }
          }
          .Go4 {
            margin-left: px2rem(3);
            width: px2rem(57);
            height: px2rem(17);
            display: flex;
            justify-content: space-between;
            padding: px2rem(0) px2rem(5);
            align-items: center;
            background: -webkit-linear-gradient(
              left,
              #ffc45d,
              #ffbb48,
              #ffad26,
              #ff9600
            );
            font-size: px2rem(14);
            color: #fff;
            font-weight: bold;
            font-style: oblique;
            border-radius: px2rem(15);
            .right5 {
              width: px2rem(13);
              height: px2rem(13);
              color: #ffad26;
              background: #fff;
              border-radius: 50%;
              line-height: px2rem(13);
              text-align: center;
            }
          }
        }
        .right {
          margin-top: px2rem(15);
          margin-right: px2rem(15);
        }
      }
    }
  }
  .Banner2 {
    width: 100%;
    height: px2rem(145);
    padding: px2rem(10);
    .my-swipe .van-swipe-item {
      border-radius: px2rem(8);
      color: #fff;
      font-size: px2rem(20);
      text-align: center;
    }
  }
  .seckill {
    width: 94%;
    border-radius: px2rem(11);
    height: px2rem(210);
    background: -webkit-linear-gradient(left, #e1effc, #d9e9f7, #ccdff0);
    margin: px2rem(0) px2rem(11);
    padding: px2rem(7) px2rem(8);
    .count-Down {
      width: 100%;
      height: px2rem(36);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: px2rem(11) px2rem(7);
      h1 {
        font-size: px2rem(17);
        color: #0aa8f8;
        font-family: "华文琥珀";
      }
      p {
        font-size: px2rem(15);
        color: #000;
        font-weight: bold;
        .A-little {
          color: #ff1d41;
        }
      }
      .more {
        width: px2rem(48);
        height: px2rem(19);
        background: -webkit-linear-gradient(
          left,
          #38bdff,
          #26b6fe,
          #3bbbfc,
          #1db0fc
        );
        text-align: center;
        color: #fff;
        font-size: px2rem(13);
        line-height: px2rem(19);
        border-radius: px2rem(15);
      }
    }
    .corp {
      width: 100%;
      height: px2rem(163);
      background: #fff;
      border-radius: px2rem(11);
      dl {
        dt {
          padding: px2rem(22) px2rem(22) px2rem(0) px2rem(22);
        }
        dd {
          padding: px2rem(0) px2rem(15);
          h3 {
            font-size: px2rem(13);
            color: #000;
            margin-bottom: px2rem(11);
          }
          p {
            font-weight: bolder;
            color: #fd391e;
            font-size: px2rem(14);
          }
        }
      }
    }
  }
  .group-Booking {
    height: px2rem(161);
    background: #fff;
    width: 94%;
    margin: px2rem(12) px2rem(11) px2rem(3) px2rem(11);
    border-radius: px2rem(11);
    .over-Flow {
      width: 100%;
      height: px2rem(41);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: px2rem(13) px2rem(10);
      .icons {
        width: px2rem(23);
        height: px2rem(23);
        background: -webkit-linear-gradient(
          left,
          #38bdff,
          #26b6fe,
          #3bbbfc,
          #1db0fc
        );
        border-radius: 50%;
        text-align: center;
        line-height: px2rem(23);
        color: #fff;
        font-size: px2rem(10);
      }
      h1 {
        font-size: px2rem(16);
        font-weight: bolder;
        color: #000;
        .Flow {
          color: #babbb8;
          font-size: px2rem(12);
        }
      }
      .more {
        width: px2rem(65);
        height: px2rem(19);
        background: -webkit-linear-gradient(
          left,
          #38bdff,
          #26b6fe,
          #3bbbfc,
          #1db0fc
        );
        text-align: center;
        color: #fff;
        font-size: px2rem(13);
        line-height: px2rem(19);
        border-radius: px2rem(15);
      }
    }
    .corp1 {
      width: 100%;
      height: px2rem(125);
      display: flex;
      dl {
        dt {
          padding: px2rem(11) px2rem(26) px2rem(0) px2rem(21);
        }
        dd {
          padding: px2rem(0) px2rem(10);
          p {
            font-weight: bolder;
            color: #fd391e;
            font-size: px2rem(14);
          }
        }
      }
    }
  }
  .group-Booking1 {
    height: px2rem(160);
    background: #fff;
    width: 94%;
    margin: px2rem(12) px2rem(11) px2rem(3) px2rem(11);
    border-radius: px2rem(11);
    .over-Flow1 {
      width: 100%;
      height: px2rem(41);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: px2rem(13) px2rem(10);
      .icons {
        width: px2rem(23);
        height: px2rem(23);
        background: -webkit-linear-gradient(
          left,
          #fe7340,
          #fe855a,
          #fe693d,
          #fd5632
        );
        border-radius: 50%;
        text-align: center;
        line-height: px2rem(23);
        color: #fff;
        font-size: px2rem(10);
      }
      h1 {
        font-size: px2rem(16);
        font-weight: bolder;
        color: #000;
        .Flow {
          color: #babbb8;
          font-size: px2rem(12);
        }
      }
      .more {
        width: px2rem(65);
        height: px2rem(19);
        background: -webkit-linear-gradient(
          left,
          #fe7340,
          #fe855a,
          #fe693d,
          #fd5632
        );
        text-align: center;
        color: #fff;
        font-size: px2rem(13);
        line-height: px2rem(19);
        border-radius: px2rem(15);
      }
    }
    .corp1 {
      width: 100%;
      height: px2rem(121);
      display: flex;
      dl {
        dt {
          padding: px2rem(11) px2rem(26) px2rem(0) px2rem(21);
          img {
            width: px2rem(92);
            height: px2rem(75);
          }
        }
        dd {
          padding: px2rem(0) px2rem(10);
          p {
            font-weight: bolder;
            color: #fd391e;
            font-size: px2rem(14);
            span {
              font-size: px2rem(10);
              color: #9596a1;
              text-decoration: line-through;
            }
          }
        }
      }
    }
  }
  .promotion {
    width: 100%;
    height: px2rem(29);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: px2rem(0) px2rem(18);
    margin-top: px2rem(5);
    p {
      font-size: px2rem(16);
    }
  }
  .body-shopping {
    width: 94%;
    height: auto;
    margin: px2rem(12) px2rem(11) px2rem(3) px2rem(11);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;

    dl {
      width: 48%;
      // padding: px2rem(20) px2rem(10);
      // height: px2rem(245);
      // height: auto;
      height: max-content;
      border-radius: px2rem(11);
      background: #fff;
      margin: px2rem(6) px2rem(0);
      position: absolute;
      dt {
        text-align: center;
        padding: px2rem(14) px2rem(0);
      }
      dd {
        padding: px2rem(0) px2rem(10);
        h3 {
          font-size: px2rem(15);
        }
        .price {
          font-size: px2rem(13);
          color: #c5c5c5;
          text-decoration: line-through;
        }
        .num {
          font-size: px2rem(16);
          color: #e61f0d;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
